<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"  >
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popupjs</title>
<style>
#mask {
	background-color: #666;
	background:
		url(http://keyframe.com.br/wp-content/uploads/2013/01/bg_pop.png)
		repeat;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9000;
}

#popup {
	color: #000066;
	height: 200px;
	display: none;
	left: 50%;
	margin-left: -250px;
	margin-top: -158px;
	padding: 0;
	position: fixed;
	top: 32%;
	width: 500px;
	z-index: 9999;
}

#fechar {
	position: relative;
}

#fechar a {
	position: absolute;
	right: -27px;
	top: 0;
	border: 1px solid #F00;
	width: 24px;
	height: 24px;
	text-indent: -4000px;
	overflow: hidden;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#fechar a:hover {
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
</style>
</h:head>

<h:body>
	<div id="mask" onclick="javascript: fechar();"></div>
	<div id="popup" class="popup">
		<div id="fechar">
			<a href="javascript: fechar();">Fechar</a>
		</div>
		<div id="img_pop">
			<a
				href="https://www.facebook.com/pages/Comunica%C3%A7%C3%A3o-Digital-keyframe/108236579266747"
				target="_blank"><img
				src="http://keyframe.com.br/wp-content/uploads/2013/01/keyframe.jpg" /></a>
		</div>
	</div>
	<script language="javascript">
		// Função que fecha o pop-up ao clicar no botao fechar
		function fechar() {
			document.getElementById('popup').style.display = 'none';
			document.getElementById('mask').style.display = 'none';
		}
		// Aqui definimos o tempo para fechar o pop-up automaticamente em milissengundos
		function abrir() {
			document.getElementById('popup').style.display = 'block';
			setTimeout("fechar()", 15000);
		}
		function trocaordem() {
			document.getElementById("popup").style.zIndex = "1";
		}
		abrir();
	</script>
	<p:commandButton value="Login" 
							actionListener="#{loginBean.openLoginPopUp}" />
</h:body>
</html>